<template>
  <div>
    <div class="vue-header">
      <span class="title">{{ vueTitle }}</span>
      <!-- 用户信息 -->
      <user-info />
      <span class="iconfont icon-logo-vue vue-icon">icon-logo-vue</span>
    </div>
    <img class="img1" :src="img1" alt="png" title="png" />
    <img class="img2" :src="img2" alt="jpeg" title="jpeg" />
    <img class="img3" :src="img3" alt="jpg" title="jpg" />
    <img class="gif" :src="fireGif" alt="gif" title="gif" />
    <div class="webpack-header">
      <span class="title">{{ webpackTitle }}</span>
      <span class="iconfont icon-webpack webpack-icon">icon-webpack</span>
    </div>
  </div>
</template>

<script>
import { getGithubInfo } from "@/api/index";
import { add, square } from "@/utils/index";
import img1 from "@/assets/img/01.png";
import img2 from "@/assets/img/02.jpeg";
import img3 from "@/assets/img/03.jpg";
import fireGif from "@/assets/img/fire.gif";
import UserInfo from "./components/UserInfo";

export default {
  components: {
    UserInfo,
  },
  data() {
    return {
      vueTitle: "VUE Application 2.6.14",
      webpackTitle: "Webpack Util 5.70.0",
      img1: img1,
      img2: img2,
      img3: img3,
      fireGif: fireGif,
    };
  },
  created() {
    this.initData();
  },
  mounted() {
    console.log(add(5, 10));
    console.log(square(10));
  },
  methods: {
    initData() {
      getGithubInfo().then((res) => {
        console.log("data :>> ", res.data);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.vue-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #42b983;
  color: #fff;
}
.webpack-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #FA402D;
  color: #fff;
}
.img1 {
  width: 30%;
}
.img2 {
  width: 30%;
}
.img3 {
  width: 30%;
}
</style>